<script setup>
import {ref} from "vue"
import {router} from "../../../router"
import zhanzhangDialog1 from "../../../components/zhanzhangDialog1.vue"
const returnBtn = () => {
    router.replace('/learn/isMy/init')
}
const dialogName1 = ref('golang开始')
const isClick1 = ref(true)
const type = ref("golang")
const num1 = ref('go1')
const dialogName2 = ref('golang协程')
const isClick2 = ref(false)
const num2 = ref('go2')
const isClick3 = ref(false)
const num3 = ref('go3')

const onSelect = (num) => {
    switch(num){
        case 1:
            isClick1.value = true
            isClick2.value = false
            isClick3.value = false
            break
        case 2:
            isClick1.value = false
            isClick2.value = true
            isClick3.value = false
            break
        case 3:
            isClick1.value = false
            isClick2.value = false
            isClick3.value = true
            break
    }
}

</script>

<template>
    <div class="returnBtnBox">
        <span @click="returnBtn()">返回首页</span>
    </div>
    <div class="MasterBox">
        <div class="masterBox">
            <div class="dialogBox">
                <div @click="onSelect(1)">
                    <zhanzhangDialog1 
                        :name="dialogName1"
                        :isClick="isClick1"
                        :type="type"
                        :num = "num1"
                    />
                </div>
                <div @click="onSelect(2)">
                    <zhanzhangDialog1 
                        :name="dialogName2"
                        :isClick="isClick2"
                        :type="type"
                        :num = "num2"
                    />
                </div>
            </div>
            <div class="showBox">
                <router-view></router-view>
            </div>
            
        </div>
    </div>
</template>

<style scoped>
.returnBtnBox{
    position: absolute;
    left: 2%;
    top: 2%;
    width: 100px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}
.returnBtnBox span:hover{
    cursor:pointer;
    color: red;
}
.MasterBox{
    position: absolute;
    left: 2.5%;
    top: 10%;
    width: 95%;
    height: 90%;
}
.masterBox{
    width: 100%;
    height: 93%;
    overflow-y: auto;
    display: flex;
}
.dialogBox{
    position: relative;
    left: 0;
    top: 0;
    width: 10%;
    height: 100%;
}
.showBox{
    margin-left: 10%;
    width: 80%;
    height: 200%;
}
.bottomBox{
    width: 100%;
    height: 7%;
    background: rgba(200, 200, 200, 0.4);
    display: flex;
    align-items: center;
}
.returnBtn{
    position: absolute;
    left: 3%;
    bottom: 0;
    width: 5%;
    height: 7%;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.nextBtn{
    position: absolute;
    right: 3%;
    bottom: 0;
    width: 5%;
    height: 7%;
    display: flex;
    align-items: center;
    cursor: pointer;
}
</style>